import { defineComponent } from "vue";
import TitleView from "../TitleView";
import { GoodsListItemProps } from "./types";
import TextGroups from "../TextGroups";
import ButtonView from "../ButtonView";
import "./index.less";
import LabelGroup from "../LabelGroup";
export default defineComponent({
  name: "",
  props: GoodsListItemProps,
  setup(_, { slots }) {
    return () => {
      const renderRightBody = () => {
        return (
          <div class="flex items-end justify-center">
            <TextGroups {..._} />
            <ButtonView>{_.buttonName}</ButtonView>
          </div>
        );
      };
      return (
        <div class="goods-list-item">
          <div class="imgbox" style={{ backgroundImage: `url(${_.img})` }} />
          <div class="ml-[10px]">
            <div class="flex items-center">
              <TitleView {..._} class="mr-[10px] truncate" />
              <LabelGroup data={_.labelData} />
            </div>
            {slots.rightBody ? slots.rightBody() : renderRightBody()}
          </div>
        </div>
      );
    };
  },
});
